<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(10, 10, 10);
const materials = new THREE.MeshLambertMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 })  // 后面（青）
const mesh = new THREE.Mesh(geometry, materials);
mesh.position.set(0, 0, 0);
scene.add(mesh);


const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(30, width / height, 10, 3000);
camera.position.set(50, 50, 50);
camera.lookAt(0, 0, 0);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const directionalLight = new THREE.SpotLight(0xffffff, 1000.0);
directionalLight.position.set(20, 20, 20);
scene.add(directionalLight);

mesh.rotation.y = Math.PI / 2;
mesh.translateX(10);


const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
});
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);





const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    renderer.render(scene, camera);
})


const stats = new Stats;
 stats.showPanel(0);
document.body.appendChild(stats.dom);
const render = () => {
    renderer.render(scene, camera);
    mesh.rotateZ(0.01);
    stats.update();
    requestAnimationFrame(render);
}
// render();






</script>